<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
		<link rel="stylesheet" href="../css/public.css" media="all">
		<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
	</head>
	<script>
		
		// 通过名称或地址查询商家
		function find() {
			// 请求路径
			// http://localhost:8080/baolema/bus/findAll?busName=烧烤&address=花
			let path="http://localhost:8080/baolema/bus/findAll";
			
			$.get(path+"?address=" + $("#content").val()+"&busName="+$("#content").val(), function(res) {
				// 清空页面 删除被选元素的子元素
				$("#busView").empty();
				// 显示查询的数据
				$(res).each(function(index,element){
					// 获取id传送
					console.log(element.bid)
					$("#busView").append("<div class='layui-row' id='bus-view' style=' height: 150px;  margin-top: 5px; background-color: white;' onclick='toDish(busId)' >"+
						"<input id='busId' value='"+element.bid+"' style='display: none;' />"+
						"<div class='layui-col-xs5'>"+
							"<div class='grid-demo' id='busImg'>"+
								"<img src='"+element.busImage+"' style='width: 70%;height: 70%;' />"+
							"</div>"+
						"</div>"+
						"<div class='<layui-col-xs8></layui-col-xs8> '>"+
							"<div class='grid-demo'>"+
								"<div id='busName' style='font-size: 28px;margin-left: 10px;'>"+element.busName+"</div>"+
								"<div class='layui-icon' style='margin-top: 25px;margin-left: 10px;'>起送价&#xe65e;25 配送&#xe65e;25</div>"+
							"</div>"+
						"</div>"+
					"</div>");
				})
			})
		}
		
		// 进入商家
		function toDish(res){
			// 
			let bid=$(res).val();
			console.log(bid);
			// window.location="dish.html?bid="+bid;
		}
		
	</script>
	<body>
		<div style="width:100%; height: 50px; background-color: #3399FF; padding-top: 20px;">
			<div class="layui-row" style="font-size: 0.625rem margin-right:0.625rem; border-radius: 25px; background-color: white; height: 30px; width: 85%; margin-left:30px;">
				<div class="layui-col-xs5 ">
					<div class="grid-demo">
						<button onclick="find()" class="layui-btn layui-btn-radius layui-btn-primary layui-btn-sm" style="border: 0px;">
							<span class="layui-icon" style="font-size: 10px; color: gray;">&#xe615;</span>
						</button>
					</div>
				</div>
				<div class="layui-col-xs7 ">
					<div class="grid-demo grid-demo-bg2">
						<input id="content" style="margin-top: 7px; border: 0px;" placeholder="请输入商家名称或地址" />
					</div>
				</div>
			</div>
		</div>
			<div class="layui-row" id="bus-view" style=" height: 50px; background-color: white; ">
				<div class="layui-col-xs6">
					<div class="grid-demo">
						<button class="btn-bor-hid btn-sort" style="align-items: center;">
							综合排序
							<i class="layui-icon layui-icon-triangle-d"></i>
						</button>

					</div>
				</div>
				<div class="layui-col-xs6 ">
					<div class="grid-demo ">
						<button class="btn-bor-hid btn-select" style="font-size: 16px;align-items: center; margin-top: 10px;">
							筛选
							<i class="layui-icon layui-icon-down"></i></button>
					</div>
				</div>
			</div>
			<div id="busView">
				<!-- 查询内容的显示区域 -->

			</div>
			<hr />
			<div style="width: 100%; height: 360px;"></div>
			<hr />
			<div class="layui-row" style="align-items: center;margin-bottom: 0px; position: absolute;">
				<div class="layui-col-xs4" style="text-align: center;">
					<div class="grid-demo grid-demo-bg1" style="align-items: center;margin: 0 auto;">
						<span class="layui-icon" style="font-size: 30px; text-align: center;">&#xe653;</span>
						<div>首页</div>
					</div>
				</div>
				<div class="layui-col-xs4" style="align-items: center;">
					<div class="grid-demo">
						<span class="layui-icon" style="font-size: 30px;text-align: center;">&#xe63c;</span>
						<div>订单</div>
					</div>
				</div>
				<div class="layui-col-xs4" style="align-items: center;">
					<div class="grid-demo grid-demo-bg1">
						<span class="layui-icon" style="font-size: 30px;">&#xe66f;</span>
						<div>我的</div>
					</div>
				</div>
			</div>
	</body>


</html>
